<template>
  <div class="about">
      <router-view/>
  </div>
</template>
<script>


    export default {
        name: "App",

    };
</script>
<style lang="less">
    @baseSize: 37.5;
    @backCol: #FFFFFF;
    @fontCol: #111111;
    @borCol: #F2F2F2;
    .px2rem(@name,@px) {
            @{name}: @px / @baseSize /2 * 1rem;
    }

    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    a {
        text-decoration: none;
        color: @fontCol;
    }

    .big-item {
        .search-box {
            .px2rem(width, 750);
            .px2rem(height, 118);
            background: @backCol;
            border-bottom: 2px solid @borCol;

            .search-card {
                .px2rem(width, 670);
                .px2rem(height, 118);
                .px2rem(line-height, 118);
                .px2rem(font-size, 36);
                font-weight: bold;
                color: @fontCol;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;

                .search-icon {
                    .px2rem(font-size, 42);
                }
            }

        }

        .content {
            .px2rem(width, 750);
            background: @backCol;

            .content-box {
                display: flex;
                flex-wrap: wrap;

                .card:nth-child(3n) {
                    border-right: none;
                }

                .card {
                    box-sizing: border-box;
                    .px2rem(width, 250);
                    .px2rem(height, 250);
                    border-bottom: 1px solid @borCol;
                    border-right: 1px solid @borCol;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .include {
                        display: inline-block;
                        .px2rem(width, 200);
                        .px2rem(height, 200);

                        .card-img {
                            .px2rem(width, 150);
                            .px2rem(height, 150);

                            margin: 0 auto;
                        }

                        .card-name {
                            .px2rem(width, 200);
                            .px2rem(height, 50);
                            .px2rem(font-size, 24);
                            text-align: center;
                            .px2rem(line-height, 50);
                            font-weight: bold;

                        }
                    }
                }
            }
        }
    }

    .small-item {
        .show {
            .px2rem(width, 750);
            .px2rem(height, 380);
            background: #333333;
            position: relative;

            .show-img {
                .px2rem(width, 750);
                .px2rem(height, 380);

            }

            .search-box {
                .px2rem(width, 670);
                .px2rem(height, 80);
                position: absolute;
                top: 0;
                .px2rem(left, 40);
                display: flex;
                justify-content: space-between;
                align-items: center;


                .back {
                    .px2rem(width, 50);
                    .px2rem(height, 50);
                    border-radius: 50%;
                    background: @backCol;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .back-icon {
                        .px2rem(font-size, 28);
                        color: @fontCol;
                        font-weight: bold;
                    }
                }

                .search {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .px2rem(width, 50);
                    .px2rem(height, 50);

                    .search-icon {
                        .px2rem(font-size, 42);
                        color: @backCol;

                    }
                }
            }
        }

        .content {
            .title {
                .px2rem(width, 750);
                .px2rem(height, 130);
                box-sizing: border-box;
                border-bottom: 2px solid @borCol;

                p {
                    .px2rem(height, 130);
                    .px2rem(line-height, 130);
                    .px2rem(margin-left, 48);
                    .px2rem(font-size, 38);
                    color: @fontCol;
                    font-weight: bold;
                }

            }

            .content-box {
                display: flex;
                flex-wrap: wrap;

                .card:nth-child(3n) {
                    border-right: none;
                }

                .card {
                    box-sizing: border-box;
                    .px2rem(width, 250);
                    .px2rem(height, 250);
                    border-bottom: 1px solid @borCol;
                    border-right: 1px solid @borCol;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .include {
                        display: inline-block;
                        .px2rem(width, 200);
                        .px2rem(height, 200);

                        .card-img {
                            .px2rem(width, 150);
                            .px2rem(height, 150);

                            margin: 0 auto;
                        }

                        .card-name {
                            .px2rem(width, 200);
                            .px2rem(height, 50);
                            .px2rem(font-size, 24);
                            text-align: center;
                            .px2rem(line-height, 50);
                            font-weight: bold;

                        }
                    }
                }
            }
        }

    }

    .product-list {
        .show {
            .px2rem(width, 750);
            .px2rem(height, 230);
            background: #333333;
            position: relative;

            .show-img {
                .px2rem(width, 750);
                .px2rem(height, 230);

            }

            .search-box {
                .px2rem(width, 670);
                .px2rem(height, 80);
                position: absolute;
                top: 0;
                .px2rem(left, 40);
                display: flex;
                justify-content: space-between;
                align-items: center;


                .back {
                    .px2rem(width, 50);
                    .px2rem(height, 50);
                    border-radius: 50%;
                    background: @backCol;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .back-icon {
                        .px2rem(font-size, 28);
                        color: @fontCol;
                        font-weight: bold;
                    }
                }

                .search {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .px2rem(width, 50);
                    .px2rem(height, 50);

                    .search-icon {
                        .px2rem(font-size, 42);
                        color: @backCol;

                    }
                }
            }
        }

        .content {
            .title {
                .px2rem(width, 750);
                .px2rem(height, 180);
                box-sizing: border-box;
                border-bottom: 2px solid @borCol;

                .title-name {
                    .px2rem(height, 100);
                    .px2rem(line-height, 100);
                    .px2rem(margin-left, 48);
                    .px2rem(font-size, 38);
                    color: @fontCol;
                    font-weight: bold;
                }

                .sel {
                    .px2rem(width, 750);
                    .px2rem(height, 80);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;


                    .sel-card {
                        .px2rem(width, 150);
                        .px2rem(height, 60);
                        .px2rem(line-height, 60);
                        text-align: center;
                        .px2rem(border-radius, 30);
                        background: #F5F5F5;
                        font-weight: bold;
                        .px2rem(font-size, 24);
                        color: @fontCol;
                        .iconfont{
                            .px2rem(font-size, 20);
                            .px2rem(padding-left, 10);
                        }
                    }
                    .active{
                        background: @fontCol;
                        color: @backCol;
                    }
                }

            }
            .content-box{
                .card{
                    .px2rem(width,750);
                    .px2rem(height,250);
                    border-bottom: 1px solid @borCol;
                    .include{
                        width: 100%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .card-content{
                            .px2rem(width,700);
                            .px2rem(height,200);
                            display: flex;
                            justify-content: space-between;
                            .product-img{
                                .px2rem(width,200);
                                .px2rem(height,200);

                            }
                            .product-msg{
                                .px2rem(width,440);
                                .px2rem(height,200);

                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                .product-name{
                                    color: @fontCol;
                                    font-weight: bold;
                                    .px2rem(font-size,36)
                                }
                                .product-sale{
                                    color: #636363;
                                    font-weight: bold;
                                    .px2rem(font-size,18)
                                }
                                .product-price{
                                    color: orangered;
                                    font-weight: bold;
                                    .px2rem(font-size,32);
                                    text-align: right;
                                }
                            }
                        }
                    }

                }

            }
        }
    }


</style>